<template>
    <div class="container">
      <div class="background">
        <div class="text-container">
          <h1 class="main-title">线狮子少年</h1>
          <p class="sub-title">专注于青少年教育与发展</p>
          <a href="#" class="cta-button" @click="animate">了解更多</a>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    setup() {
      // 获取按钮元素
      const ctaButton = document.querySelector(".cta-button");
  
      // 动画函数
      function animate() {
        // 添加动画类名
        ctaButton.classList.add("animated");
  
        // 在动画结束后移除类名
        setTimeout(function() {
          ctaButton.classList.remove("animated");
        }, 1000);
      }
  
      return {
        animate,
      };
    },
  };
  </script>
  
  <style>
  .container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  
  .background {
    position: relative;
    background-color: #000;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: gradient-animation 15s ease infinite;
  }
  
  .text-container {
    text-align: center;
    color: #fff;
    z-index: 1;
  }
  
  .main-title {
    font-size: 5rem;
    font-weight: bold;
    margin-bottom: 0;
  }
  
  .sub-title {
    font-size: 2rem;
    margin-bottom: 30px;
  }
  
  .cta-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f00;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    transition: background-color 0.3s ease;
  }
  
  .cta-button:hover {
    background-color: #ff5c5c;
  }
  
  .cta-button.animated {
    animation: button-animation 1s ease forwards;
  }
  
  @keyframes gradient-animation {
    0% { background: linear-gradient(45deg, #ff0044, #ffcc33); }
    25% { background: linear-gradient(45deg, #ffcc33, #00ccff); }
    50% { background: linear-gradient(45deg, #00ccff, #cc00ff); }
    75% { background: linear-gradient(45deg, #cc00ff, #ff0044); }
    100% { background: linear-gradient(45deg, #ff0044, #ffcc33); }
  }
  
  @keyframes button-animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
  </style>
  